<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>车辆详情</title>
  <link rel="stylesheet" href="../../bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<style>  
.text{font-size:14px} 
</style>
</head>
<body>
	<div class="wrapper wrapper-content animated fadeInRight col-lg-12" style="background-color:#FFFFFF" id="mainPage">
	
	<div class="container col-lg-12" style="padding-right:0px; padding-left:1px">
	 
	<div class="row clearfix col-lg-12" style="padding-right:0px;height:800px; padding-left:4px">
		<div class="col-lg-9 column" style="padding-right:0px;">			
			
			<div class="row clearfix">
				<div class="col-lg-12 column" style="padding-left:0px;">												
					 <div class="col-lg-1 column" style="padding-left:0px;"><img src="../../images/u2033.png" width="71" height="53"/></div>
					 <div class="col-lg-8 column" style="padding-left:0px;">
					     <div style=" float:left;width:120px;" align="right"><p><span class="text">车牌：苏A J78921</span></p></div>
						 <div style=" float:left;width:120px;" align="center"><p><span class="text">司机：张洪亮</span></p></div>
						 <div style=" float:left;width:180px;" align="right"><p><span class="text">充电时间：1.5-2.5h  快充</span></p></div></br>
						 <div style=" float:left;width:120px;" align="right"><p><span class="text">车辆类型：类型A</span></p></div>
						 <div style=" float:left;width:156px;" align="center"><p><span class="text">电话：13821548732</span></p></div>
						 <div style=" float:left;width:180px;"><p><span class="text">电池额定容量：93.4 kWh</span></p></div>						    
					 </div>
					 <div class="col-lg-3 column" style="padding-left:0px;" align="left">
					     <div><span><strong>实时位置</strong></span></div>
						 <div><span class="text">江苏省人民医院</span></div>
						 <div><span class="text">江苏省南京市鼓楼区广州路300号</span></div>								 
					 </div>
				</div>
			</div>
			
			<div class="row clearfix" style="border:0.5px solid #CCCCCC;">	    
				<div class="col-lg-12 column" style="padding-left:6px; padding-right:0px; margin-right:0px; padding-top:0px">
				   </br>				  
					 <div class="col-lg-2 column" style="padding-left:0px; padding-top:6px;background-color:#f9f9f9; width:103px; height:66px; font-size:12px">
					    <span style="padding-left:12px;padding-top:0px"><img src="../../images/u2055.png" width="35" height="35"/></span>
						<span style="padding-left:1px;" class="text">&nbsp;:&nbsp;负载</span></br>
						<span style="padding-left:7px">负载状态</span>
					 </div>&nbsp;&nbsp;
					<div class="col-lg-2 column" style="padding-left:0px; padding-top:6px; margin-left:3px;background-color:#f9f9f9; width:103px; height:66px; font-size:12px">
						<span style="padding-left:12px;padding-top:0px"><img src="../../images/u2146.png" width="35" height="34"/></span>
						<span style="padding-left:1px;" class="text">&nbsp;:&nbsp;在线</span></br>
						<span style="padding-left:7px">通信状态</span>
					</div>
					<div class="col-lg-2 column" style="padding-left:0px; padding-top:6px;margin-left:3px;background-color:#f9f9f9; width:109px; height:66px; font-size:12px">
						<span style="padding-left:7px;padding-top:0px"><img src="../../images/u2064.png" width="35" height="35"/></span>
						<span style="padding-left:1px;" class="text">:&nbsp;未充电</span></br>
						<span style="padding-left:7px">充电状态</span>
					</div>
					<div class="col-lg-2 column" style="padding-left:0px; padding-top:6px;margin-left:3px;background-color:#f9f9f9; width:110px; height:66px; font-size:12px">
						<span style="padding-left:14px;padding-top:0px"><img src="../../images/u311.png" width="36" height="36"/></span>
						<span style="padding-left:1px;" class="text">&nbsp;:&nbsp;25次</span></br>
						<span style="padding-left:7px">累计充电次数</span>
					</div>
					<div class="col-lg-2 column" style="padding-left:0px; padding-top:6px;margin-left:3px;background-color:#f9f9f9; width:192px; height:66px; font-size:12px">
						<span style="padding-left:28px;padding-top:0px"><img src="../../images/u1757.png" width="36" height="35"/></span>
						<span style="padding-left:1px; width:80px; float:right" class="text">:&nbsp;2017-08-05 14:45:42</span></br>
						<span style="padding-left:0px">上次充电结束时间</span>		
						
					</div>
					<div class="col-lg-2 column" style="padding-left:1px; padding-top:6px;margin-left:3px;background-color:#f9f9f9; width:118px; height:66px; font-size:12px">
						<span style="padding-left:4px;padding-top:0px"><img src="../../images/u2046.png" width="35" height="35"/></span>
						<span style="padding-left:2px;" class="text">:&nbsp;380km</span></br>
						<span style="padding-left:0px">累计行驶里程</span>
					</div>
			 
			  </div>
			
            
					
			<div class="col-lg-12 column" style="padding-left:6px; padding-right:0px; margin-right:0px">
				     </br>
				<div class="col-lg-5 column" style="padding-left:0px; padding-right:0px;float:left">
				   <div class="col-lg-12 column" style="padding-left:0px; padding-right:0px;float:left">
					    <span style="padding-top:6px;float:left; height:30px;width:320px;background-color:#f9f9f9;">
							<strong class="col-lg-9" style="padding-left:2px;">冷藏箱实时监测</strong>
							<a class="col-lg-3" id="modal-658647" href="?#cljc-detail" role="button" class="btn" data-toggle="modal">更多</a>
						</span>					   
					     <table class="table table-condensed table-bordered" style="table-layout:fixed;">				
							<tbody>  
								<tr>
									<td style="padding-left:0px">
									<div class="col-lg-6 column" style="padding-left:0px;padding-top:6px;margin-left:0px;width:174px; height:66px; font-size:12px;">
									<span style="padding-left:0px;padding-top:0px"><img src="../../images/u2080.png" width="35" height="35"/></span>
									<span style="padding-left:0px; padding-top:0px" class="text">2017-08-08 09:18:24</span>
									<span style="padding-left:3px">温度1</span>
									<span style="padding-left:30px;float:middle;color:#FF0000; font-size:16px" class="text">1.8 &#176;C</span>									
									</div>
									</td>																		
									<td  style="padding-left:0px">
									<div class="col-lg-6 column" style="padding-left:0px;padding-top:6px;margin-left:0px;width:170px; height:66px; font-size:12px">
									<span style="padding-left:0px;padding-top:0px"><img src="../../images/u2080.png" width="35" height="35"/></span>
									<span style="padding-left:1px; padding-top:0px" class="text">2017-08-08 09:18:24</span>
									<span style="padding-left:3px">温度2</span>
									<span style="padding-left:30px;float:middle; color:#33CC99; font-size:16px" class="text">2 &#176;C</span>									
									</div>
									</td>									
								</tr>
								<tr>
									<td  style="padding-left:0px">
									<div class="col-lg-6 column" style="padding-left:0px;padding-top:6px;margin-left:0px;width:170px; height:66px; font-size:12px">
									<span style="padding-left:0px;padding-top:0px"><img src="../../images/u2080.png" width="35" height="35"/></span>
									<span style="padding-left:1px; padding-top:0px" class="text">2017-08-08 09:18:24</span>
									<span style="padding-left:3px">温度3</span>
									<span style="padding-left:30px;float:middle; color:#33CC99; font-size:16px" class="text">2.5 &#176;C</span>									
									</div>
									</td>			
									
									<td  style="padding-left:0px">
									<div class="col-lg-6 column" style="padding-left:0px;padding-top:6px;margin-left:0px;width:170px; height:66px; font-size:12px">
									<span style="padding-left:0px;padding-top:0px"><img src="../../images/u2097.png" width="35" height="35"/></span>
									<span style="padding-left:1px; padding-top:0px" class="text">2017-08-08 09:18:24</span>
									<span style="padding-left:3px">车门状态</span>
									<span style="padding-left:30px;float:middle; color:#33CC99; font-size:16px" class="text">关闭</span>									
									</div>
									</td>																		
								</tr>
								<tr>							
									<td  style="padding-left:0px">
									<div class="col-lg-6 column" style="padding-left:0px;padding-top:6px;margin-left:0px;width:170px; height:66px; font-size:12px">
									<span style="padding-left:0px;padding-top:0px"><img src="../../images/u2089.png" width="35" height="35"/></span>
									<span style="padding-left:1px; padding-top:0px" class="text">2017-08-08 09:18:24</span>
									<span style="padding-left:3px">湿度</span>
									<span style="padding-left:30px;float:middle; color:#33CC99; font-size:16px" class="text">65% RH</span>									
									</div>
									</td>	
									
									
									<td></td>									
								</tr>																
							</tbody>
						 </table>		 
				   </div>
                            <!--弹出页面div-->
							<div class="modal fade" id="cljc-detail" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<form>
							<div class="modal-dialog" style="width:60%">
								<div class="modal-content">
									<div class="modal-header">
										 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
										<h5 class="modal-title" id="myModalLabel">
											实时曲线
										</h5>												
									</div>
									<div class="modal-body">
									    <div class="row clearfix">
											<div class="col-lg-12 column" style="padding-left:60px;">										
												 <div class="form-group input-group-sm col-lg-3">		
													<input type="text" class="form-control" placeholder="苏A J78921" disabled="true"/>											 												
												 </div>
												 <div class="form-group input-group-sm col-lg-3">		
													<select class="form-control" placeholder="请输入指标" style="width: 100%">
													  <option>温度1</option>
													  <option>温度2</option>
													  <option>温度3</option>
													  <option>湿度</option>
													  <option>总里程</option>
													  <option>充电电流</option>
													  <option>放电电流</option>
													</select>
												 </div>
												 <div class="form-group input-group-sm col-lg-3">		
													<input type="text" class="form-control" id="datepicker" placeholder="请输入日期"/>											 												
												 </div>
												 <div class="form-group input-group-sm col-lg-3">		
													<span class="input-group-btn" style="padding-right:10px;float:left" >
														 <button type="button" class="btn btn-info btn-flat" id="_search">查询</button>
													</span>									 												
												 </div>																			
											</div>	
										</div>	
										
										<div class="row clearfix">
										<div class="col-xs-12 column">																									
											<div class="box box-info">
												<div class="box-header with-border">             
												  <div class="box-tools pull-right">					 										
													<a id="modal-65864" href="history.html" role="button" class="btn">更多历史</a>
												  </div>
												</div>

												<div class="box-body chart-responsive">
												  <div id="line-chart" style="height: 260px;"></div>
												</div>											 
											</div>													       											
										</div>	
										</div>										
									</div>
									
									<div class="modal-footer">
										 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									</div>
								</div>					
							</div>	
							</form>
						    </div>						   
				   <div class="col-lg-12 column" style="padding-left:0px; padding-right:0px;float:left">
					    <div class="col-lg-12 column" style="padding-left:0px; padding-right:0px;float:left">	
						<span style="padding-top:6px;float:left; height:30px;width:320px;background-color:#f9f9f9;">
							<strong class="col-lg-9" style="padding-left:2px;">车体实时监测</strong>
							<a class="col-lg-3" id="modal-658647" href="?#cljc-detail" role="button" class="btn" data-toggle="modal">更多</a>
						</span>	
					
					       <table class="table table-condensed table-bordered" style="table-layout:fixed;">				
							<tbody>
								<tr>
									<td style="padding-left:0px">
									<div class="col-lg-6 column" style="padding-left:0px;padding-top:6px;margin-left:0px;width:174px; height:66px; font-size:12px;">
									<span style="padding-left:0px;padding-top:0px"><img src="../../images/u2133.png" width="35" height="35"/></span>
									<span style="padding-left:0px; padding-top:0px" class="text">2017-08-08 09:18:24</span>
									<span style="padding-left:3px">剩余电量</span>
									<span style="padding-left:30px;float:middle; color:#33CC99; font-size:16px" class="text">67.9 kWh</span>									
									</div>
									</td>	
									<td style="padding-left:0px">
									<div class="col-lg-6 column" style="padding-left:0px;padding-top:6px;margin-left:0px;width:174px; height:66px; font-size:12px;">											
									<span style="padding-left:0px;padding-top:0px"><img src="../../images/u2133.png" width="35" height="35"/></span>
									<span style="padding-left:0px; padding-top:0px" class="text">2017-08-08 09:18:24</span>
									<span style="padding-left:3px">SOC</span>
									<span style="padding-left:30px;float:middle; color:#33CC99; font-size:16px" class="text">73&#37;</span>									
									</div>
									</td>											
								</tr>
								<tr>
									<td style="padding-left:0px">
									<div class="col-lg-6 column" style="padding-left:0px;padding-top:6px;margin-left:0px;width:174px; height:66px; font-size:12px;">											
									<span style="padding-left:0px;padding-top:0px"><img src="../../images/u2208.png" width="35" height="35"/></span>
									<span style="padding-left:0px; padding-top:0px" class="text">2017-08-08 09:18:24</span>
									<span style="padding-left:3px">总电压</span>
									<span style="padding-left:30px;float:middle; color:#33CC99; font-size:16px" class="text">12 V</span>									
									</div>
									</td>		

									<td style="padding-left:0px">
									<div class="col-lg-6 column" style="padding-left:0px;padding-top:6px;margin-left:0px;width:174px; height:66px; font-size:12px;">											
									<span style="padding-left:0px;padding-top:0px"><img src="../../images/u2208.png" width="35" height="35"/></span>
									<span style="padding-left:0px; padding-top:0px" class="text">2017-08-08 09:18:24</span>
									<span style="padding-left:3px">总电流</span>
									<span style="padding-left:30px;float:middle; color:#33CC99; font-size:16px" class="text">80 A</span>									
									</div>
									</td>									
								</tr>
								<tr>
									<td style="padding-left:0px">
									<div class="col-lg-6 column" style="padding-left:0px;padding-top:6px;margin-left:0px;width:174px; height:66px; font-size:12px;">											
									<span style="padding-left:0px;padding-top:0px"><img src="../../images/u2176.png" width="35" height="35"/></span>
									<span style="padding-left:0px; padding-top:0px" class="text">2017-08-08 09:18:24</span>
									<span style="padding-left:3px">车速</span>
									<span style="padding-left:30px;float:middle; color:#33CC99; font-size:16px" class="text">80 km/h</span>									
									</div>
									</td>		
									<td style="padding-left:0px">
									<div class="col-lg-6 column" style="padding-left:0px;padding-top:6px;margin-left:0px;width:174px; height:66px; font-size:12px;">											
									<span style="padding-left:0px;padding-top:0px"><img src="../../images/u2199.png" width="35" height="35"/></span>
									<span style="padding-left:0px; padding-top:0px" class="text">2017-08-08 09:18:24</span>
									<span style="padding-left:3px">挡位</span>
									<span style="padding-left:30px;float:middle; color:#33CC99; font-size:16px" class="text">P</span>									
									</div>
									</td>									
								</tr>																
							</tbody>
						 </table>	
						</div>						 
				   </div>
				 </div> 
				 
				 <div class="col-lg-7 column" style="padding-right:0px; padding-left:16px;float:right">
						 <span style="padding-top:6px;float:left; height:30px;width:420px;background-color:#f9f9f9;">
							<strong class="col-lg-10" style="padding-left:2px;">实时告警</strong>
							<a class="col-lg-2" id="modal-658647" href="?#cljc-detail" role="button" class="btn" data-toggle="modal">更多</a>
						</span>
							<br/>&nbsp;&nbsp;
							<div class="row clearfix">
								<div class="col-lg-12 column" style="padding-left:0px;">
							                <div class="tabbable" id="tabs-alarm">
												<ul class="nav nav-tabs" style="padding-left:12px">
													<li class="active">																	
													<a href="?#panel-carAram" data-toggle="tab" style="padding-left:0px; padding-right:0px">车体告警</a>
													</li>
													<li>
														<a href="?#panel-thAram" data-toggle="tab" style="padding-left:0px; padding-right:0px">温湿度告警</a>
													</li>
													<li>
														<a href="?#panel-contactAram" data-toggle="tab" style="padding-left:0px; padding-right:0px">通信状态告警</a>
													</li>
													<li>
														<a href="?#panel-deviceAram" data-toggle="tab" style="padding-left:0px; padding-right:0px">终端故障告警</a>
													</li>
													<li>
														<a href="?#panel-fenceAram" data-toggle="tab" style="padding-left:0px; padding-right:0px">电子围栏告警</a>
													</li>
												</ul>
											<div class="tab-content">										   
												<div class="tab-pane active" id="panel-carAram">
													<p>
														 <table id="carAram_table"></table>	
													</p>
												</div>
												<div class="tab-pane" id="panel-thAram">
													<p>
														<table id="thAram_table"></table>	
													</p>	
												</div>
												<div class="tab-pane" id="panel-contactAram">
													<p>
														 <table id="contactAram_table"></table>	
													</p>
												</div>
												<div class="tab-pane" id="panel-deviceAram">
													<p>
														<table id="deviceAram_table"></table>	
													</p>	
												</div>
												<div class="tab-pane" id="panel-fenceAram">
													<p>
														<table id="fenceAram_table"></table>	
													</p>	
												</div>
											</div>
										</div>
							
							
							    </div>
							</div>
					
				 </div>
			</div> 	       		
	    </div> 	  
		</div>
						
			
		<div class="col-lg-3 " style="padding:0px;">		
			<div class="col-lg-12">						
			  </br>
			   <div class="input-group input-group-sm">
                <input type="text" class="form-control" placeholder="请输入车牌号">
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-info btn-flat" id="car_search">Go!</button>
                    </span>
               </div>			   
			</div>
		  
			<br/>&nbsp;&nbsp;
			
			<div class="col-lg-12">			
			<div class="ibox float-e-margins">              
                <div class="ibox-content">
                    <div id="using_json"></div>
                </div>
            </div>		
			</div>		
		</div>
			
    </div>
	</div>	
	</div>

<script src="../../bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="../cljc/js/cljc_xq.js"></script>
<!--<script src="../../common/js/highcharts/highcharts2.js"></script>  -->

<script type="text/javascript">
    $(function () {
        $("#datepicker").datepicker({
            language: "zh-CN",
            autoclose: true,//选中之后自动隐藏日期选择框
            clearBtn: true,//清除按钮
			todayHighlight: 1, //今日高亮显示		
            format: "yyyy-mm-dd"//日期格式
        });
    });
	var urlinfo=window.location.href; 
		var len=urlinfo.length;
		var offset=urlinfo.indexOf("?");
		var newsidinfo=urlinfo.substr(offset,len)
		var newsids=newsidinfo.split("=");
		var newsid=newsids[1]; 
		//alert("监测详情页面获取的参数值是"+ decodeURI(newsid)); 
</script>


</body>
</html>
